<template>
    <div class="customer-index yuan-container">
        <a-card title="客户管理">
            <div class="filter-panel">
                <a-input-search class="filter-list" allowClear style="width: 200px;color: #05b089" v-model="keywords"
                    placeholder="客户名称" @search="resetList" />
                <div class="filter-list" style="float: right;">
                    <a-button type="primary" @click="add" v-if="$utilCheckPermission(['customerManagementAdd'])">新增</a-button>
                    <!-- <a-button type="primary" @click="downloadTpl">下载模板</a-button>
                    <a-upload name="file" :multiple="false" :beforeUpload="beforeUpload" :showUploadList="false">
                        <a-button type="primary">导入</a-button>
                    </a-upload> -->
                </div>
            </div>
            <div class="table">
                <a-table bordered :rowKey="getRowKey" :data-source="pageList" :columns="columns" :pagination="pagination"
                    :loading="loading">
                </a-table>
            </div>
        </a-card>
        <Add :visible="addVisible" @closeModal="() => addVisible = false" :infoDetail="infoDetail" @resetList="getList" />
        <Detail :visible="detailVisible" @closeModal="() => detailVisible = false" :infoDetail="infoDetail" />
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { ClientListRes } from "@/api/nextApi";
import Add from "./components/Add.vue";
import Detail from "./components/Detail.vue";
import { downLoadFile } from "@/utils";
@Component({
    name: "customerIndex",
    components: { Add, Detail },
})
export default class extends Vue {
    keywords = "";
    loading = false;
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: ClientListRes[] = [];
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: ClientListRes, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "客户名称",
        },
        {
            align: "center",
            dataIndex: "contacts",
            key: "contacts",
            title: "联系人",
        },
        {
            align: "center",
            dataIndex: "phone",
            key: "phone",
            title: "联系方式",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 260,
            customRender: (text: string, record: ClientListRes, index: number) => {
                const detailBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "eye", type: "primary", size: "small" },
                        on: { click: () => this.showDetail(record) },
                    },
                    "详情"
                );
                const deleteBtn = h(
                    "a-popconfirm",
                    {
                        props: { title: "确定要删除吗？", okText: "确定", cancelText: "取消" },
                        on: { confirm: () => this.remove(record) },
                    },
                    [
                        h(
                            "a-button",
                            {
                                props: { icon: "delete", type: "danger", size: "small" },
                            },
                            "删除"
                        ),
                    ]
                );
                const btn: any[] = [];
                if (this.$utilCheckPermission(['customerManagementDetails'])) btn.push(detailBtn);
                if (this.$utilCheckPermission(['customerManagementRemove'])) btn.push(deleteBtn);
                return h("div", btn);
            },
        },
    ];

    getRowKey(item: any) {
        return item.id;
    }

    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getClientList({
                name: this.keywords,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }

    detailVisible = false;
    showDetail(item: ClientListRes) {
        this.infoDetail = item;
        this.detailVisible = true;
    }

    addVisible = false;
    infoDetail = {} as ClientListRes;
    editDetail(item: ClientListRes) {
        this.infoDetail = item;
        this.addVisible = true;
    }
    add() {
        this.infoDetail = {} as ClientListRes;
        this.addVisible = true;
    }
    async remove(item: ClientListRes) {
        try {
            this.loading = true;
            await nextApi.deleteClient(item.id);
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;

        this.getList();
    }
    clickDisable(item: ClientListRes) {}
    async mounted() {
        this.getList();
    }
    uploadChange(file: any) {
        if (file?.file?.response?.data.length) {
            this.$message.success(file?.file?.response?.msg);
            this.resetList();
        }
    }

    downloadTpl() {
        this.loading = true;
        nextApi.downloadCustomerTpl((res: any) => {
            const blob = new Blob([res.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                // type: "application/vnd.ms-excel",
            });
            downLoadFile(blob, "客户导入模板");
            this.loading = false;
        });
    }
    beforeUpload(file: any) {
        let formData = new FormData();
        formData.append("file", file);
        this.upload(formData);
        return false;
    }
    async upload(formData: any) {
        // this.loading = true;
        // try {
        //     const res = await nextApi.uploadCustomer(formData);
        //     this.$message.success(res.msg);
        //     this.getList();
        // } finally {
        //     this.loading = false;
        // }
    }
}
</script>
<style lang="scss">
.customer-index {
    padding: 20px;
}
</style>
